<template>
	<scroll-view scroll-y="true" show-scrollbar="false" class="content">
		<view class="bg_box">
			<view class="bg01"></view>
			<view class="assets_box">
				<view class="text_box">
					<view class="title">商户名称: {{name}}</view>
					<view class="num">{{ y }}</view>
					<view class="text">累计收益：{{ all_y }}</view>
				<!-- 	<view class="text">冻结中：{{ sy }}</view> -->
				</view>
				<!-- <view class="menu" @click="gotopage" data-url="/pages/personal/withdrawal" >提现</view> -->
				<view class="menu" @tap="showEwm"><image src="../../static/ewm.png" mode="widthFix"></image></view>
			</view>
		</view>

		<view class="total_title">
			<view class="line"></view>
			<view class="text">收益明细</view>
			<label class="iconfont t_icon" @click="seachItemChange">&#xe605;</label>
			<view class="t_seach" v-if="seach_show">
				<view class="t_s_con"><input class="t_s_input" type="text" v-model="seach_value" placeholder="输入关键字" /></view>
				<view class="t_s_footer">
					<view class="t_s_btn" @click="resFun">重置</view>
					<view class="t_s_btn tsb2" @click="seachFun">搜索</view>
				</view>
			</view>
		</view>

		<block v-for="(item, index) in list" :key="'list' + index">
			<view class="list_box">
				<view class="text_box">
					<view class="text">{{ item.name }}</view>
					<view class="time">{{ item.time }}</view>
				</view>
				<view class="money" v-if="item.st == 1">
					{{ item.money }}
					<!-- <block v-if="item.dj==1">(冻结中,22天后兑换)</block>
			<block v-if="item.dj==2">(此单已退款,收益作废)</block> -->
					<view v-if="item.dj == 1">(冻结中)</view>
					<view v-if="item.dj == 2">(此单已退款,收益作废)</view>
				</view>

				<view class="money moneycolor" v-if="item.st == 2">-{{ item.money }}</view>
			</view>
		</block>

		<view class="pupu_box" :class="pupu == true ? 'pupu_show' : ''"  @tap.stop="showEwm">
			<view class="ewm" @tap.stop=""><tki-qrcode v-if="pupu" cid="qrcode" ref="qrcode" :val="user.ewm" :size="350" :onval="true" :loadMake="true" :usingComponents="true" @result="qrR" /></view>
		</view>
	</scroll-view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	data() {
		return {
			pupu:false,
			list: [],
			y: 0,
			user: '',
			all_y: 0,
			sy: 0,
			jcsy: 0,
			sx: 0,
			j: 0,
			name: '',
			fff: 0,
			seach_value: '',
			seach_show: false
		};
	},
	onShow() {
		this.loadData();
		let me = this;
		me.Net._get('yfsh', {}, res => {
			if (res.code == 1) {
				me.fff = res.data;
			}
		});
	},
	methods: {
		showEwm(){
			this.pupu = !this.pupu;
		},
		qrR(res) {
			//this.src = res;
			console.log(res)
		},
		loadData() {
			let me = this;

			me.Net._get('balance', { kw: me.seach_value }, res => {
				if (res.code == 1) {
					me.list = res.data.jlist;
                    me.user=res.data
					 me.user.ewm= me.user.id.toString()
					me.y = res.data.j;
					me.name = res.data.username;
					me.all_y = res.data.all_j;
					me.sy = res.data.ydj;
					me.jcsy = res.data.jcsy;
					me.sx = res.data.sx;
					me.j = res.data.j;
					console.log(res.data);
				}
			});
		},
		seachItemChange() {
			this.seach_show = !this.seach_show;
		},
		seachFun() {
			this.seach_show = false;
			this.loadData();
		},
		resFun() {
			this.seach_show = false;
			this.seach_value = '';
			this.loadData();
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	padding-bottom: 0 !important;
	background-color: #fff;
}
.content {
	height: 100%;
}

.surplus-content {
	width: 690rpx;
	height: 490rpx;
	margin: 2vw auto 0vw;
	background-image: linear-gradient(#4d726f, #b4eef7);
	background-position: bottom;
	border-radius: 2vw;
	background-repeat: no-repeat;
	position: relative;

	view {
		font-weight: 500;
		color: #fff;
		position: absolute;
		left: 40rpx;
		&:nth-child(1) {
			font-size: 28rpx;
			top: 50rpx;
		}
		&:nth-child(2) {
			font-size: 48rpx;
			top: 100rpx;
		}
		&:nth-child(3) {
			font-size: 28rpx;
			top: 50rpx;
			left: 430rpx;
		}
		&:nth-child(4) {
			font-size: 48rpx;
			top: 100rpx;
			left: 430rpx;
		}
		&:nth-child(5) {
			font-size: 28rpx;
			top: 230rpx;
		}
		&:nth-child(6) {
			font-size: 48rpx;
			top: 280rpx;
		}
		&:nth-child(7) {
			font-size: 28rpx;
			top: 230rpx;
			left: 430rpx;
		}
		&:nth-child(8) {
			font-size: 48rpx;
			top: 280rpx;
			left: 430rpx;
		}
		&:nth-child(9) {
			font-size: 28rpx;
			width: 220rpx;
			height: 76rpx;
			background-color: #fff;
			text-align: center;
			line-height: 76rpx;
			border-radius: 40rpx;
			top: 390rpx;
			left: 40rpx;
			color: #036f7c;
		}
		&:nth-child(10) {
			font-size: 28rpx;
			width: 220rpx;
			height: 76rpx;
			background-color: #fff;
			text-align: center;
			line-height: 76rpx;
			border-radius: 40rpx;
			top: 390rpx;
			left: 430rpx;
			color: #036f7c;
		}
	}
}

.bill-content {
	width: 690rpx;
	margin: 30rpx auto;

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		padding: 24rpx 0;
	}

	.body {
		width: 100%;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 0 4rpx 2rpx #f6f6f6;

		.bill-item {
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f6f7f9;
			&:last-child {
				border-bottom: none;
			}

			.left {
				view {
					font-weight: 500;
					&:nth-child(1) {
						font-size: 30rpx;
						color: #333333;
					}
					&:nth-child(2) {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.right {
				font-size: 30rpx;
				font-weight: 500;
			}

			.red {
				color: #333;
			}
			.black {
				color: #ff4447;
			}
		}
	}
}

.list_box {
	width: 90%;
	margin: 0 auto;
	padding: 3vw 0;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-bottom: 1px solid #e8e8e8;
	position: relative;
	z-index: 9;
}

.list_box .text_box {
	flex: 1;
}

.list_box .text_box .text {
	font-size: 3.5vw;
	color: #333;
	font-weight: bold;
}

.list_box .time {
	font-size: 3.2vw;
	color: #999;
	margin-top: 2vw;
}

.list_box .money {
	flex: 1;
	font-size: 4vw;
	color: #333;
	font-weight: bold;
	text-align: right;
}

.moneycolor {
	color: #f10020 !important;
}

.total_title {
	width: 90%;
	margin: 20vw auto 0;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 10;
	.t_seach {
		position: absolute;
		top: 100%;
		background: #ffffff;
		width: 100%;
		left: 0;
		border-radius: 0 0 15rpx 15rpx;
		box-shadow: 0 10rpx 10rpx #e2e2e2;
		.t_s_con {
			width: 100%;
			padding: 40rpx;
			.t_s_input {
				width: 100%;
				height: 70rpx;
				border-radius: 50rpx;
				border: 1rpx solid #c2c2c2;
				font-size: 30rpx;
				padding: 0 20rpx;
				text-align: center;
			}
		}
		.t_s_footer {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx 40rpx;
			.t_s_btn {
				width: 130rpx;
				height: 65rpx;
				border-radius: 10rpx;
				border: 1rpx solid #ababab;
				line-height: 65rpx;
				font-size: 30rpx;
				color: #333333;
				text-align: center;
			}
			.tsb2 {
				color: #ffffff;
				background: #4d726f;
				border: none;
			}
		}
	}
}

.total_title .line {
	width: 2vw;
	height: 6vw;
	border-radius: 2vw;
	background-color: #4d726f;
	margin-right: 2vw;
}

.total_title .text {
	flex: 1;
	font-size: 4vw;
	color: #333;
	font-weight: bold;
}
.total_title .t_icon {
	font-size: 36rpx;
	color: #6f6f6f;
}

.bg_box {
	width: 100%;
	position: relative;
}

.bg_box .bg01 {
	width: 100%;
	height: 30vw;
	background-color: #4d726f;
}

.bg_box .assets_box {
	width: 90%;
	position: absolute;
	top: 6vw;
	left: calc(50% - 45%);
	background-color: #fff;
	border-radius: 3vw;
	padding: 4vw 5vw;
	display: flex;
	align-items: center;
	box-shadow: 0 0 10rpx #9a9a9a;
}

.bg_box .assets_box .menu {
	width: 24vw;
	text-align: center;
	margin-left: 2vw;
}

.bg_box .assets_box .menu image {
	width: 50%;
}

.bg_box .assets_box .menu02 {
	width: 24vw;
	height: 10vw;
	line-height: 10vw;
	background-color: #4d726f;
	border-radius: 12vw;
	font-size: 3.5vw;
	color: #fff;
	text-align: center;
	margin-left: 2vw;
}

.bg_box .assets_box .text_box {
	flex: 1;
}

.bg_box .assets_box .text_box .title {
	font-size: 3.5vw;
	color: #333;
}

.bg_box .assets_box .text_box .num {
	font-size: 6vw;
	color: #333;
	font-weight: bold;
	margin-top: 3vw;
}

.bg_box .assets_box .text_box .text {
	font-size: 3.5vw;
	color: #333;
	margin-top: 3vw;
}

.pupu_box {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}

.pupu_show{
	display: flex !important; 
}

.pupu_box .ewm{
	background-color: #fff;
	padding: 8%;
	border-radius: 3vw;
}
</style>
